<template>
  <div class="base-container">
    <div style="width: 100%; text-align: center; font-size: 24px; font-weight: bold">
      性能数据展示
    </div>
    <div style="display: flex">
      <div style="min-width: 400px; margin-right: 10px">
        <div>渲染时间： {{ state.echarPietDuration }} ms</div>
        <!-- 网络分布  饼图-->
        <div style="width: 300px; height: 600px" :id="state.pieId"></div>
      </div>
      <div style="min-width: 550px; margin-right: 10px">
        <div>渲染时间： {{ state.echarPietDuration }} ms</div>
        <!-- 网络分布地图 -->
        <div style="width: 400px; height: 600px" :id="state.mapId"></div>
      </div>
      <div style="min-width: 600px; margin-right: 10px">
        <div>渲染时间： {{ state.echarLineDuration }} ms</div>
        <!-- fmp 耗时 折现图 -->
        <div style="width: 600px; height: 600px" :id="state.lineId"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";

import { reactive, onMounted, onBeforeMount } from "vue";

import chinaJson from "@/views/perf/view/data/map.js";

const state: any = reactive({
  pieId: "pie-id",
  mapId: "map-id",
  lineId: "line-id",
  locationGis: [],

  echartPieInstance: null,
  echarPietDuration: 0,

  echartMapInstance: null,
  echarMaptDuration: 0,

  echartLineInstance: null,
  echarLineDuration: 0,
});

function renderPieChart() {
  // 基于准备好的dom，初始化echarts实例
  const domInstance = document.getElementById(state.pieId);
  if (domInstance) {
    domInstance.removeAttribute("_echarts_instance_");
  } else {
    return;
  }
  console.log("domInstance", domInstance);
  const myChart = echarts.init(domInstance);
  const option = {
    title: {
      text: "网络频段占比",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "网络频段",
        type: "pie",
        radius: "50%",
        data: [
          { value: 25, name: "2g" },
          { value: 735, name: "3g" },
          { value: 580, name: "4g" },
          { value: 900, name: "5g" },
          { value: 300, name: "未知状态" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  console.log("option", option);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option, true);
  // 监听
  state.echartPieInstance = myChart;
  myChart.on("click", function (params: any) {
    console.log("params", params);
  });
  window.onresize = myChart.resize;
  performance.mark("render-pie-echart-end");
  const measure = performance.measure(
    "render-echart-duration",
    "render-echart-start",
    "render-pie-echart-end"
  );
  console.log("measure", measure);
  console.log("measure type", typeof measure);
  const duration = measure.duration;
  console.log("duration", duration);
  state.echarPietDuration = duration;
}

function renderLineChart() {
  // 基于准备好的dom，初始化echarts实例
  const domInstance = document.getElementById(state.lineId);
  if (domInstance) {
    domInstance.removeAttribute("_echarts_instance_");
  } else {
    return;
  }
  console.log("domInstance", domInstance);
  const myChart = echarts.init(domInstance);
  const option = {
    title: {
      text: "fmp消耗走势",
      left: "left",
    },
    legend: {
      data: ["fmpCount-line", "fmpCount-bar"],
    },
    xAxis: [
      {
        type: "category",
        data: [
          "2024-05-15",
          "2024-05-16",
          "2024-05-17",
          "2024-05-18",
          "2024-05-19",
          "2024-05-20",
        ],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "fmpCount-bar",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value} ms",
        },
      },
      {
        type: "value",
        name: "fmpCount-line",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value} ms",
        },
      },
    ],
    series: [
      {
        name: "fmpCount-bar",
        type: "bar",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " ms";
          },
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      },
      {
        name: "fmpCount-line",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " ms";
          },
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      },
    ],
  };

  console.log("option", option);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option, true);
  // 监听
  state.echartLineInstance = myChart;
  myChart.on("click", function (params: any) {
    console.log("params", params);
  });
  window.onresize = myChart.resize;
  performance.mark("render-line-echart-end");
  const measure = performance.measure(
    "render-echart-duration",
    "render-echart-start",
    "render-line-echart-end"
  );
  console.log("measure", measure);
  console.log("measure type", typeof measure);
  const duration = measure.duration;
  console.log("duration", duration);
  state.echarLineDuration = duration;
}

function renderMapChart() {
  // 基于准备好的dom，初始化echarts实例
  const domInstance = document.getElementById(state.mapId);
  if (domInstance) {
    domInstance.removeAttribute("_echarts_instance_");
  } else {
    return;
  }
  console.log("domInstance", domInstance);
  const myChart = echarts.init(domInstance);
  const option = {
    title: {
      text: "网络地图分布",
      color: "#fff",
    },
    visualMap: {
      min: 0,
      max: 50000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"],
      },
    },
    geo: {
      // 经纬度中心
      // center: state.centerLoction,
      type: "map",
      map: "chinaJson", // 这里的值要和上面registerMap的第一个参数一致
      roam: false, // 拖拽
      nameProperty: "name",
      geoIndex: 1,
      aspectScale: 0.75, // 长宽比, 默认值 0.75
      // 悬浮标签
      label: {
        type: "map",
        map: "chinaJson", // 这里的值要和上面registerMap的第一个参数一致
        // roam: false, // 拖拽
        // nameProperty: 'name',
        show: true,
        color: "#333",
        formatter: function (params: any) {
          return params.name;
        },
        // backgroundColor: '#546de5',
        align: "center",
        fontSize: 10,
        width: (function () {
          // let n = parseInt(Math.random() * 10)
          return 110;
        })(),
        height: 50,
        shadowColor: "rgba(255,255,255,.7)",
        borderRadius: 10,
      },
      zoom: 1.2,
    },
    tooltip: {
      show: true,
      position: ["10%", "10%"],
    },
    series: [
      {
        // 放大波纹渲染显示
        type: "effectScatter",

        zlevel: 3,
        showEffectOn: "render",
        data: state.locationGis, // 配置散点的坐标数据
        coordinateSystem: "geo", // 指明散点使用的坐标系统
        rippleEffect: {
          // 缩放
          scale: 4,
          // 涟漪的颜色
          color: "rgba(41, 140, 253, 0.3)",
          // 波纹数量
          number: 2,
          // 扩散方式 stroke(线条) fill（区域覆盖）
          brushType: "fill",
        },
        // 形状
        symbol: "circle",
      },
    ],
  };

  console.log("option", option);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option, true);
  // 监听
  state.echartMapInstance = myChart;
  myChart.on("click", function (params: any) {
    console.log("params", params);
  });
  window.onresize = myChart.resize;
  performance.mark("render-map-echart-end");
  const measure = performance.measure(
    "render-echart-duration",
    "render-echart-start",
    "render-map-echart-end"
  );
  console.log("measure", measure);
  console.log("measure type", typeof measure);
  const duration = measure.duration;
  console.log("duration", duration);
  state.echarMaptDuration = duration;
}

const initMapLoc = () => {
  let itemData = chinaJson.features;
  let length = itemData.length;
  for (let loc = 0; loc < length; ++loc) {
    let name = itemData[loc].properties.name;
    console.log("name", name);
    let center = itemData[loc].properties.center;
    state.locationGis.push({
      value: center,
    });
  }
  console.log(" state.locationGis", state.locationGis);
};

onBeforeMount(() => {
  // 标记开始时刻
  performance.mark("render-echart-start");
  //   注册地图
  echarts.registerMap("chinaJson", chinaJson);
  //  loc
});

onMounted(() => {
  console.log("init mounted");
  initMapLoc();
  renderMapChart();
  renderPieChart();
  renderLineChart();
});
</script>

<style>
.base-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      0deg,
      rgba(41, 140, 253, 0.3) 0px,
      rgba(41, 140, 253, 0.3) 1px,
      transparent 1px,
      transparent 100px
    ),
    linear-gradient(
      90deg,
      rgba(41, 140, 253, 0.3) 0px,
      rgba(41, 140, 253, 0.3) 1px,
      transparent 1px,
      transparent 100px
    );
  background-size: 25px 25px;
  z-index: -1;
}
</style>
